<template>
  <div>
    <div class="userInfo">
      <span class="baseSpan">基础信息</span>
      <!-- 2、分隔线区域 -->
      <el-divider></el-divider>
      <el-row>
        <el-col :span="7" style="padding-left: 100px">
          <div class="personInfo">
            <el-card class="personInfo-card">
              <span style="font-size: 20px; color: #5a5a5a">个人信息</span>
              <el-divider class="divider"></el-divider>
              <div class="avatar_div">
                <el-avatar
                  class="avatar"
                  v-if="userData.headPic"
                  :src="userData.headPic"
                ></el-avatar>
                <el-avatar
                  class="avatar"
                  v-else
                  icon="el-icon-user-solid"
                ></el-avatar>
              </div>
              <el-divider class="divider"></el-divider>
              <div class="list-group">
                <ul class="list-group-ul">
                  <li class="list-group-item">
                    <i class="el-icon-document">用户（ID）</i>
                    <span class="span-right">{{
                      userData.username || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-user-solid">用户名称</i>
                    <span class="span-right">{{
                      userData.fullName || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-full-screen">用户年龄</i>
                    <span class="span-right">{{ userData.age || "-" }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-phone">手机号码</i>
                    <span class="span-right">{{ userData.phone || "-" }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-office-building">所在地址</i>
                    <span class="span-right">{{
                      userData.address || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-s-custom">所属角色</i>
                    <span class="span-right">{{
                      userCacheData.roleName || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-time">注册时间</i>
                    <span class="span-right">{{
                      userData.regTime || "-"
                    }}</span>
                  </li>
                  <el-divider class="li-divider"></el-divider>
                  <li class="list-group-item">
                    <i class="el-icon-time">登录时间</i>
                    <span class="span-right">{{
                      userData.endTime || "-"
                    }}</span>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="17" style="padding-left: 66px; padding-right: 100px">
          <div class="baseInfo">
            <el-card class="baseInfo-card">
              <span style="font-size: 20px; color: #5a5a5a">基本信息</span>
              <el-divider class="divider"></el-divider>
              <div class="slider-change">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="基本信息" name="edit-baseinfo">
                    <el-form :model="userForm" ref="form">
                      <el-form-item
                        label="姓名"
                        prop="fullName"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          size="small"
                          v-model="userForm.fullName"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="电话号码"
                        prop="phone"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          size="small"
                          v-model="userForm.phone"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="年龄"
                        prop="age"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          size="small"
                          v-model="userForm.age"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="性别"
                        prop="gender"
                        style="width: 420px"
                        :label-width="formLabelWidth"
                      >
                        <el-radio v-model="userForm.gender" :label="1"
                          >男</el-radio
                        >
                        <el-radio v-model="userForm.gender" :label="2"
                          >女</el-radio
                        >
                      </el-form-item>
                      <el-form-item
                        label="地址"
                        prop="address"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          size="small"
                          v-model="userForm.address"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="头像"
                        prop="headPic"
                        :label-width="formLabelWidth"
                      >
                        <Upload
                          :imageUrl="userForm.headPic"
                          @upload-success="handleUploadSuccess"
                        ></Upload>
                      </el-form-item>
                      <div class="button">
                        <el-button type="primary" @click="updUserInfo()"
                          >确定</el-button
                        >
                        <el-button type="primary" @click="close()"
                          >关闭</el-button
                        >
                      </div>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="edit-password">
                    <el-form
                      :model="passwordData"
                      ref="passwrodForm"
                      :rules="rules"
                    >
                      <el-form-item
                        label="旧密码"
                        prop="oldPassword"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          show-password
                          type="password"
                          size="small"
                          v-model="passwordData.oldPassword"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="新密码"
                        prop="newPassword"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          show-password
                          type="password"
                          size="small"
                          v-model="passwordData.newPassword"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="确认密码"
                        prop="confirmPassword"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          show-password
                          type="password"
                          size="small"
                          v-model="passwordData.confirmPassword"
                        ></el-input>
                      </el-form-item>
                      <div class="button">
                        <el-button type="primary" @click="updPassword()"
                          >确定</el-button
                        >
                        <el-button type="primary" @click="close()"
                          >关闭</el-button
                        >
                      </div>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getUserInfo, upd, updPassword } from "@/services/user";
import Upload from "@/components/upload.vue";
export default {
  name: "PersonalCenter",
  components: {
    Upload,
  },
  data() {
    //这里存放数据
    return {
      userData: {},
      userCacheData: {},
      userForm: {
        headPic: "",
      },
      formLabelWidth: "100px",
      activeName: "edit-baseinfo",
      passwordData: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    updPassword() {
      this.$refs.passwrodForm.validate((valid) => {
        if (valid) {
          updPassword(this.passwordData)
            .then((res) => {
              if (res.data) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        }
      });
    },
    getUserInfo() {
      getUserInfo()
        .then((res) => {
          this.userData = res.data;
          this.userForm = res.data;
          if (this.userForm.headPic == null) {
            this.userForm.headPic = "";
          }
        })
        .catch((error) => {});
    },
    handleUploadSuccess(imageUrl) {
      this.userForm.headPic = imageUrl;
    },
    close() {
      this.$router.push("/home/homePage");
    },
    updUserInfo() {
      if (this.userForm.id) {
        upd(this.userForm)
          .then((res) => {
            if (res.data) {
              let userInfo = JSON.parse(sessionStorage.getItem("userData"));
              userInfo.headPic = this.userForm.headPic;
              userInfo.fullName = this.userForm.fullName;
              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
          })
          .catch((err) => {});
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.userCacheData = JSON.parse(sessionStorage.getItem("userData"));
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped>
.userInfo {
  height: 50%;
  .baseSpan {
    font-size: 25px;
    color: #5a5a5a;
  }
}
.personInfo {
  .personInfo-card {
    height: 700px;
    .avatar_div {
      justify-content: center;
      display: flex;
      width: auto;
      .avatar {
        height: 120px;
        width: 120px;
        border-radius: 50%;
      }
    }
    .list-group {
      .list-group-ul {
        .li-divider {
          margin-top: 15px;
        }
        .list-group-item {
          .span-right {
            float: right;
          }
        }
      }
    }
  }
}
.baseInfo {
  .baseInfo-card {
    height: 700px;
    .slider-change {
      .button {
        margin-left: 8%;
      }
    }
  }
}
</style>